<template>
  <div class="page-container">
    <h2>详情</h2>
    <div class="flex">
      <el-image
        style="width: 100px; height: 100px"
        :src="list.imgUrl"
        :fit="cover"
      />
      <div class="ml-30 w-100">
        <el-row v-for="(item, index) in formItems" :key="index">
          <el-col v-for="(subItem, subIndex) in item" :key="subIndex" :span="6">
            <template v-if="subItem.formType !== 30">
              <strong>{{ subItem.displayName }}:</strong>
              {{ list[subItem.fieldProperty] || '' }}
            </template>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-row style="height: 20px" />
    <el-divider />
    <h2>资产轨迹</h2>
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-form inline :model="queryForm" @submit.prevent>
          <el-form-item label="记录类型">
            <el-select
              v-model="queryForm.type"
              placeholder="请选择记录类型"
              clearable="true"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              :icon="Search"
              type="primary"
              @click="fetchAssetInfoList"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table border :data="AssetInfoList">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column
        label="使用人"
        prop="useUserName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="操作类型"
        prop="checkTypeName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="类型"
        prop="typeName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-tag v-if="row">{{ row.typeName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="金额"
        prop="fee"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="备注"
        prop="remark"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="图片"
        prop="imgUrl"
        show-overflow-tooltip
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-image
            v-if="row.imgUrl"
            style="width: 50px; height: 50px"
            :src="row.imgUrl"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="row.imgArray"
            :initial-index="4"
            fit="cover"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="创建人"
        prop="createByName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />

      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<script>
  import { doAssetInfo, doAssetInfoList } from '@/api/assetManagement'
  import { fetchFieldCfgList } from '@/api/dictConfig'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'AssetManagementDetail',
    setup() {
      const route = useRoute()
      const state = reactive({
        editRef: null,
        list: [],
        AssetInfoList: [],
        listLoading: true,
        selectRows: '',
        queryForm: {},
        statusList: [
          {
            label: '分配',
            value: 0,
          },
          {
            label: '报废',
            value: 1,
          },
          {
            label: '报备',
            value: 2,
          },
        ],
        formItems: [],
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNum = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNum = 1
        fetchData()
      }
      const fetchData = async () => {
        try {
          const { data } = await doAssetInfo(route.query.id)
          state.list = data
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }
      const fetchAssetInfoList = async () => {
        try {
          const { data } = await doAssetInfoList(state.queryForm)
          data.forEach((item) => {
            if (item.imgUrl) {
              item.imgArray = item.imgUrl.split(' ')
            }
          })
          state.AssetInfoList = data
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }

      const initRenderConfig = async () => {
        try {
          const { data } = await fetchFieldCfgList({
            typeCode: route.query.typeCode,
          })
          if (data && data.length) {
            const newData = data.filter((item) => item.onDataCol === 1)
            const result = []
            for (let i = 0; i < newData.length; i += 3) {
              result.push(newData.slice(i, i + 3))
            }
            state.formItems = result
          }
          fetchData()
        } catch (e) {
          console.error(e)
        }
      }

      onMounted(() => {
        state.queryForm.assetId = route.query.id
        if (route.query.id) {
          initRenderConfig()
          fetchAssetInfoList()
        }
      })

      return {
        ...toRefs(state),
        setSelectRows,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        fetchAssetInfoList,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style scoped>
  .flex {
    display: flex;
  }
  .ml-30 {
    margin-left: 30px;
  }
  .w-100 {
    width: 100%;
  }
  .page-container :deep() .el-row {
    margin-bottom: 16px;
  }
</style>
